<template>
  <div>
    <div class="item-info rent-info">
      <!-- <div class="sub-btn">
        <div class="add-btn" v-if="$route.name=='moneydetail'">
          <el-button @click="newmoney">清空</el-button>
          <el-button @click="submitrentmoney">添加</el-button>
        </div>
      </div> -->


      <el-dialog :title="zjgltitle" :visible.sync="newzjgl" width="700px">
        <div class="item-info base-info" v-if="$route.name=='moneydetail'">
          <div class="left-info">
            <div class="item">
              <span>
                当前用途
              </span>
              <el-autocomplete style="width:400px" v-model="newid"
                disabled
                :fetchSuggestions="querySearchAsync3"
                placeholder="请输入筛选用途" @select="handleSelect3" clearable
              ></el-autocomplete>
            </div>
            <!--
            <div class="item">
              <span>
                <i>*</i>当前类型
              </span>
              <select v-model="moneyData.feetype" style="width:400px" @change="clearrealfee"
                disabled
              >

                <option value="2">冲正</option>
                <option value="3">退租</option>
              </select>
            </div> -->
            <!-- <option value="undefined" selected style="display:none;">请选择</option> -->
            <div class="item" v-if="moneyData.feetype=='3'">
              <span>
                <i>*</i>退租租金
              </span>
              <select v-model="moneyData.parentfeeid" style="width:400px" @change="getdisabledDate">
                <option value="undefined" selected style="display:none;">请选择</option>
                <option
                  :value="item.hash.feeid"
                  v-for="item in parentfeeidList"
                  :key="item.id"
                >期限:{{item.hash.feestart}} 至 {{item.hash.feeend}},租金:{{item.hash.feeyear}}</option>
                <option value="undefined" v-if="parentfeeidList.length==0">暂无数据</option>
              </select>
            </div>
            <div class="item" v-if="moneyData.feetype=='3'">
              <span>
                <i>*</i>手续费
              </span>
              <input
                type="text"
                style="width: 400px"
                v-validate="'required|decimal'"
                name="手续费"
                oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)"
                placeholder="请输入数字"
                v-model="moneyData.servicefee"
              >
              <b class="errorMes">{{ errors.first('手续费') }}</b>
            </div>
            <div class="item" v-if="moneyData.feetype=='3'">
              <span>
                <i>*</i>期限
              </span>
              <el-date-picker
                style="width:400px"
                type="daterange"
                rangeSeparator="至"
                startPlaceholder="开始日期"
                endPlaceholder="结束日期"
                valueFormat="yyyy-MM-dd"
                v-model="feeDate"
                :pickerOptions="pickerOptions0"
              ></el-date-picker>
            </div>
            <!-- <div class="item spec clearfix">
        <span>实测使用面积<br>(平方米)</span>
        <div class="text">
          <input type="text" value="有证" readonly>
          <input type="text" v-model="moneyData.rentarea1" readonly>
        </div>
        <div class="text">
          <input type="text" value="无证" readonly>
          <input type="text" v-model="moneyData.rentarea2" readonly>
        </div>
          </div>-->


            <div class="item" v-if="moneyData.feetype=='3'">
              <span>
                <i>*</i>金额(元)
              </span>
              <input
                type="text"
                style="width: 400px"
                v-validate="'required'"
                name="退租金额"
                oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)"
                :placeholder="tzmoney?'已缴费：'+tzmoney:'需先选择退租租金才能输入'"
                :disabled="tzmoney==''"
                @input="limitmoney"
                v-model="realfee2"
              >
              <b class="errorMes">{{ errors.first('金额') }}</b>
            </div>
            <div v-else>
              <div class="item">
                <span>
                  当前余额(元)
                </span>
                <b>{{choosefwye2}} (冲正后余额必须大于或等于0)</b>
              </div>
              <div class="item">
                <span>
                  <i>*</i>金额(元)
                </span>
                <input
                  type="text"
                  style="width: 400px"
                  v-validate="'required'"
                  name="金额"
                  @input="inputfun"
                  placeholder="请输入"
                  v-model="realfee1"
                >
                <b class="errorMes">{{ errors.first('金额') }}</b>
              </div>

            </div>


            <div class="item textarea">
              <span style="text-align:center">备注</span>
              <textarea type="text" v-model="moneyData.notice" style="width:400px"></textarea>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newzjgl = false">取 消</el-button>
          <el-button type="primary" @click="submitrentmoney">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog :title="title" :visible.sync="shoukuan" width="60%">
        <el-form labelWidth="140px">
          <el-form-item label="房屋编号：">
            {{choosefwbh}}
          </el-form-item>
          <el-form-item label="余额(元)：">
            {{choosefwye}}
          </el-form-item>
          <el-form-item label="应收租金(元)：">
            {{choosefwys}}
          </el-form-item>
          <el-form-item label="实收租金(元)：" class="is-required">
            <el-input style="width:60%" v-model="choosefwss" oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)"></el-input>
          </el-form-item>
          <el-form-item label="本次结余(元)：">
            {{choosefwjy}}
          </el-form-item>

          <el-form-item label="备注：">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="paynotice"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="shoukuan = false">取 消</el-button>
          <el-button type="primary" @click="submitshoukuan">确 定</el-button>
        </span>
      </el-dialog>
      <!-- , {{payData2.hash.rentnum}}（用途编号） -->
      <el-dialog title="编辑租金" :visible.sync="yszj" width="50%">
        <el-form labelWidth="140px">
          <el-form-item label="用途：">{{payData2.hash.detailnum}}（房屋编号）, {{payData2.hash.renter}}（承租人）</el-form-item>
          <el-form-item
            label="期限："
          >{{payData2.hash.feestart}} 至 {{payData2.hash.feeend}}（{{payData2.hash.szqx}}天）</el-form-item>
          <el-form-item label="面积㎡ ：">有证 {{payData2.hash.area1}} <br>无证 {{payData2.hash.area2}}</el-form-item>
          <el-form-item label="租金：">{{payData2.hash.feeyear}} 元（本用途租金合计：{{payData2.hash.feecount}}元）</el-form-item>
          <el-form-item label="应收租金(元)：" class="is-required">
            <el-input style="width:60%" oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)" v-model="yszjmoney" @input="inputzj"></el-input>（修改后合计：{{dqzj}}元）
          </el-form-item>
          <el-form-item label="日租金/㎡：">
            <el-input style="width:60%" oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)" v-model="yszjmoney2" @input="inputzj2"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="yszjbz"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="yszj = false">取 消</el-button>
          <el-button type="primary" @click="submityszj">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="租金审核" :visible.sync="shenhe" width="50%">
        <el-form labelWidth="140px">
          <el-form-item label="审核状态：" class="is-required">
            <el-radio v-model="shstatus" label="1">通过</el-radio>
            <el-radio v-model="shstatus" label="2">不通过</el-radio>
          </el-form-item>

          <el-form-item label="备注：" :class="wxstatus==2?'is-required':''">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="shtip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="shenhe = false">取 消</el-button>
          <el-button type="primary" @click="submitsh">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="info-list">
      <div
        style="
      padding:30px 0;
          font-weight: 600;
          font-size: 18px;
          color: #6699ff;text-align:center"
      >租金管理明细表</div>
      <div class="item" style="
    font-size: 17px;
    height: 40px;
    line-height: 40px"
        v-if="$route.name=='moneydetail'"
      >
        <span>
          <i>*</i>选择用途：
        </span>
        <el-autocomplete style="width:50%;" v-model="newid"
          :fetchSuggestions="querySearchAsync"
          placeholder="请输入" @select="handleSelect" clearable
          @clear="clear1"
        ></el-autocomplete>
        <!-- <select v-model="newid" @change="getshoukuanList(newid)" style="border: 1px solid #ccc;
    border-top: 2px solid #999;width:30%;height: 40px;
    line-height: 40px;"
        >
          <option value="" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.rentid"
            v-for="item in useType"
            :key="item.id"
          >房屋编号:{{item.hash.detailnum}},承租人:{{item.hash.renter}}</option>
        </select> -->
        <p v-if="newid" style="font-size:16px">统计信息：共应缴：{{choosefeeyear2}}，已缴：{{chooserealfee2}}，未缴：{{choosefeeyear2-chooserealfee2}}，退租：{{chooserefundfee2}}，余额：{{choosefwye2}}</p>
      </div>
      <div style="float:right" v-if="$route.name=='moneydetail'&&this.newidd!=''">
        <el-button
          type="primary"
          @click="doshoukuan"
          style="margin-bottom:10px"
        >收款</el-button>
        <el-button
          type="primary"
          @click="docongzheng"
          style="margin-bottom:10px"
        >冲正</el-button>
        <el-button
          type="danger"
          @click="dotuizu"
          style="margin-bottom:10px"
        >退租</el-button>
      </div>
      <div class="item" style="
    font-size: 17px;
    height: 40px;
    line-height: 40px"
        v-if="$route.name=='checkmdetail'"
      >
        <span>
          <i>*</i>选择用途：
        </span>
        <el-autocomplete style="width:50%;" v-model="newid2"
          :fetchSuggestions="querySearchAsync2"
          placeholder="请输入" @select="handleSelect2" clearable
          @clear="clear2"
        ></el-autocomplete>
      </div>
      <el-button
        type="primary"
        @click="doshenhe"
        style="float:right"
        v-if="$route.name=='checkmdetail'&&this.newidd2!=''"
      >审核</el-button>


      <p v-if="newid&&JSON.stringify(payinfo) != '{}'&&payinfo.status=='0'" class="suminfo">
        最新审核信息：审核状态：<b v-if="payinfo.status=='0'" style="color:rgb(255, 102, 0)">待审核，</b><b v-if="payinfo.status=='2'" style="rgb(255, 102, 0)">审核不通过</b>收款时间：{{payinfo.intime}}， 收款人：{{payinfo.op}}&nbsp;&nbsp;收款：&nbsp;{{payinfo.actpay}}(总应收：{{payinfo.shouldpay}})，收款后余额：{{payinfo.balance}}，<b v-if="payinfo.paynotice==''||payinfo.paynotice==undefined">备注信息：无。</b><b v-else>备注信息：{{payinfo.paynotice}}。</b>
      </p>
      <p v-if="newid&&JSON.stringify(payinfo) == '{}'" class="suminfo">
        暂无最新审核信息
      </p>
      <p v-if="newid2&&JSON.stringify(payinfo2) != '{}'&&payinfo2.status=='0'" class="suminfo">
        最新审核信息：审核状态：<b v-if="payinfo2.status=='0'" style="color:rgb(255, 102, 0)">待审核，</b><b v-if="payinfo2.status=='2'" style="rgb(255, 102, 0)">审核不通过</b>收款时间：{{payinfo2.intime}}，收款人：{{payinfo2.op}}&nbsp;&nbsp;收款：&nbsp;{{payinfo2.actpay}}(总应收：{{payinfo2.shouldpay}})，收款后余额：{{payinfo2.balance}}，<b v-if="payinfo2.paynotice==''||payinfo2.paynotice==undefined">备注信息：无。</b><b v-else>备注信息：{{payinfo2.paynotice}}。</b>
      </p>
      <p v-if="newid2&&JSON.stringify(payinfo2) == '{}'" class="suminfo">
        暂无最新审核信息
      </p>

      <template v-if="$route.name == 'checkmdetail'">
        <el-table
          ref="multipleTable"
          :data="checkzjData"
          border
          style="width:100%;margin:20px auto"
        >
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="hash.detailnum" label="房屋编号"></el-table-column>
          <el-table-column prop="hash.renter" label="承租人"></el-table-column>
          <el-table-column prop="hash.zjnd" label="租金年度"></el-table-column>
          <el-table-column label="收租期限">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feestart&&scope.row.hash.feeend">{{scope.row.hash.feestart}}至{{scope.row.hash.feeend}}({{scope.row.hash.szqx}}天)</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="日租金/㎡" prop="daymoney">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feeyear">{{scope.row.hash.daymoney=(Number(scope.row.hash.feeyear)/Number(scope.row.hash.szqx)/(Number(scope.row.hash.area1)+Number(scope.row.hash.area2))).toFixed(2)}}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column prop="hash.feeyear" label="应收租金(元)"></el-table-column>
          <el-table-column prop="hash.realfee" label="实收租金(元)">
                      <template slot-scope="scope">
              <span v-if="scope.row.hash.feetype=='3'"> - {{scope.row.hash.realfee}}</span>
              <span v-else-if="scope.row.hash.feetype=='2'">{{scope.row.hash.realfee}}</span>
              <span v-else>{{scope.row.hash.realfee}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="hash.area1" label="有证面积(平方米)"></el-table-column>
          <el-table-column prop="hash.area2" label="无证面积(平方米)"></el-table-column>
          <el-table-column label="租金类型">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feetype=='1'">合同</span>
              <span v-else-if="scope.row.hash.feetype=='2'">冲正</span>
              <span v-else>退租(手续费{{scope.row.hash.servicefee}})</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.status=='0'">租金待审核</span>
              <span v-else-if="scope.row.hash.status=='4'" style="color:#f60">待审核</span>
              <span v-else-if="scope.row.hash.status=='1'">审核通过</span>
              <span v-else-if="scope.row.hash.status=='5'" style="color:#f60">审核不通过</span>
              <span v-else-if="scope.row.hash.status=='9'">已删除</span>
              <span v-else>已归档</span>
            </template>
          </el-table-column>
          <el-table-column prop="hash.checknotice" label="审核说明"></el-table-column>
          <el-table-column prop="hash.op" label="创建人"></el-table-column>
          <el-table-column prop="hash.checker" label="审核人"></el-table-column>
          <el-table-column prop="hash.jiedao" label="缴费状态">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.paytype=='2'&&scope.row.hash.feetype=='1'">未缴</span>
              <span
                v-if="scope.row.hash.paytype=='1'&&scope.row.hash.feetype=='1'"
                style="color:#69f"
              >已缴</span>
              <span
                v-if="scope.row.hash.paytype=='3'&&scope.row.hash.feetype=='1'"
                style="color:#f60"
              >欠缴</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" v-if="$route.path=='/moneydetail'" width="100">
            <template slot-scope="scope">
              <span
                style="color:blue;cursor:pointer"
                @click="dopay(scope.row)"
                v-if="((scope.row.hash.realfee==''&&scope.row.hash.status=='1')||scope.row.hash.status=='5')&&scope.row.hash.feetype=='1'&&$route.path!=='/searchDetail'&&$route.path!=='/detailInfo'"
              >收款</span>
              <span
                style="color:blue;cursor:pointer;margin-left:10px"
                @click="doedit(scope.row)"
                v-if="((scope.row.hash.realfee==''&&scope.row.hash.status=='1')||scope.row.hash.status=='5')&&scope.row.hash.feetype=='1'&&$route.path!=='/searchDetail'&&$route.path!=='/detailInfo'"
              >编辑</span>
              <span style="color:#aaa" v-else>不可操作</span>
            </template>
          </el-table-column> -->
        </el-table>
      </template>
      <template v-else>
        <el-table
          ref="multipleTable"
          :data="detailData3"
          :summaryMethod="getSummaries"
          :rowStyle="rowStyle"
          border
          style="width:100%;margin:20px auto"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column type="selection" width="55" :selectable="checkboxInit2" v-if="$route.name=='moneydetail'"></el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="hash.detailnum" label="房屋编号"></el-table-column>
          <el-table-column prop="hash.renter" label="承租人"></el-table-column>
          <el-table-column prop="hash.zjnd" label="租金年度"></el-table-column>
          <el-table-column label="收租期限">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feestart&&scope.row.hash.feeend">{{scope.row.hash.feestart}}至{{scope.row.hash.feeend}}({{scope.row.hash.szqx}}天)</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="日租金/㎡" prop="daymoney">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feeyear">{{scope.row.hash.daymoney=(Number(scope.row.hash.feeyear)/Number(scope.row.hash.szqx)/(Number(scope.row.hash.area1)+Number(scope.row.hash.area2))).toFixed(2)}}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="应收租金(元)">
            <template slot-scope="scope">
               <span>{{scope.row.hash.feeyear}}</span>
       
              <el-button

                type="primary"
                @click="doedit(scope.row)"
                v-if="((scope.row.hash.realfee==''&&scope.row.hash.status!='10'&&scope.row.hash.status!='4'))&&scope.row.hash.feetype=='1'&&$route.name=='detailInfo'"
              >修改</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="hash.realfee" label="实收租金(元)">
                                <template slot-scope="scope">
              <span v-if="scope.row.hash.feetype=='3'"> - {{scope.row.hash.realfee}}</span>
              <span v-else-if="scope.row.hash.feetype=='2'">{{scope.row.hash.realfee}}</span>
              <span v-else>{{scope.row.hash.realfee}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="应缴余额" prop="balance">
            <template slot-scope="scope">
              <span>{{scope.row.hash.balance=(scope.row.hash.feeyear-scope.row.hash.realfee)}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="hash.area1" label="有证面积(平方米)"></el-table-column>
          <el-table-column prop="hash.area2" label="无证面积(平方米)"></el-table-column>
          <el-table-column label="租金类型">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.feetype=='1'">合同</span>
              <span v-else-if="scope.row.hash.feetype=='2'">冲正</span>
              <span v-else>退租(手续费{{scope.row.hash.servicefee}})</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.status=='0'">用途待审核</span>
              <span v-else-if="scope.row.hash.status=='4'" style="color:#f60">待审核</span>
              <span v-else-if="scope.row.hash.status=='1'">审核通过</span>
              <span v-else-if="scope.row.hash.status=='5'" style="color:#f60">审核不通过</span>
              <span v-else-if="scope.row.hash.status=='9'">已删除</span>
              <span v-else>已归档</span>
            </template>
          </el-table-column>
          <el-table-column prop="hash.checknotice" label="审核说明"></el-table-column>
          <el-table-column prop="hash.op" label="创建人"></el-table-column>
          <el-table-column prop="hash.checker" label="审核人"></el-table-column>
          <el-table-column prop="hash.jiedao" label="缴费状态">
            <template slot-scope="scope">
              <span v-if="scope.row.hash.paytype=='2'&&scope.row.hash.feetype=='1'">未缴</span>
              <span
                v-if="scope.row.hash.paytype=='1'&&scope.row.hash.feetype=='1'"
                style="color:#69f"
              >已缴</span>
              <span
                v-if="scope.row.hash.paytype=='3'&&scope.row.hash.feetype=='1'"
                style="color:#f60"
              >欠缴</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="$route.path=='/moneydetail'" width="100">
            <template slot-scope="scope">
              <!-- <span
                style="color:blue;cursor:pointer"
                @click="dopay(scope.row)"
                v-if="((scope.row.hash.realfee==''&&scope.row.hash.status=='1')||scope.row.hash.status=='5')&&scope.row.hash.feetype=='1'&&$route.path!=='/searchDetail'&&$route.path!=='/detailInfo'"
              >收款</span> -->
              <el-button
                size="mini"
                type="danger"
                @click="deletemoney(scope.row)"
                v-if="scope.row.hash.status=='5'&&scope.row.hash.feetype!='1'"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';

export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate: this.disabledDate,
      },
      newzjgl: false,
      choosefwbh: '',
      choosefwys: 0,
      choosefwss: 0,
      choosefwye: 0,
      choosefwye2: 0,
      choosefeeyear2: 0,
      chooserealfee2: 0,
      chooserefundfee2: 0,
      choosefwid: [],
      chooseshid: [],
      payinfo: {},
      payinfo2: {},
      suminfo: '',
      paynotice: '',
      yszjmoney: '',
      yszjmoney2: '',
      title: '收款',
      zjgltitle: '',
      shoukuan: false,
      yszj: false,
      yszjbz: '',
      choosezj: [],
      choosesk: [],
      shenhe: false,
      shstatus: '',
      shtip: '',
      payData: { hash: {} },
      payData2: { hash: {} },
      ts: this.newStore(),
      rentmoneylist: {},
      moneyData: {},
      feeDate: [],
      useType: [],
      useType2: [],
      useType3: [],
      restaurants: [],
      restaurants2: [],
      restaurants3: [],
      jfmoney: '',
      isshow: false,
      renterArr: [],
      detailData3: [],
      newid0: '',
      newid: '',
      newid2: '',
      newidd: '',
      newidd2: '',
      tzmoney: '',
      checkzjData: [],
      parentfeeidList: [],
      isupload: '',
      timestart: '',
      timeend: '',
      realfee2: '',
      realfee1: '',
    };
  },
  props: {
    handletype: {
      type: String,
      twoWay: true,
    },
    // 点击节点回调
    func: {
      type: Function,
      default: null,
    },
  },
  components: {
    test,
  },
  computed: {
    choosefwjy() {
      const a = Number(this.choosefwss) + Number(this.choosefwye) - Number(this.choosefwys);
      return a.toFixed(2);
    },
    dqzj() {
      const a = Number(this.payData2.hash.feecount);
      const b = Number(this.payData2.hash.feeyear);
      const c = Number(this.yszjmoney);
      const d = (a - b + c).toFixed(2);
      return d;
    },
  },
  methods: {
    inputfun(e) {
      console.log(e.target.value);
      const a = this.choosefwye2;
      const pattern = /^(\+|\-)?((([1-9]([0-9]*))|0)(\.[0-9]*)?)?$/;
      const val = e.target.value;
      if (val.match(pattern)) {
        if (val == '-' || Number(val) + Number(a) >= 0) {
          return true;
        }
      }
      this.realfee1 = '';
      return false;
    },
    clearrealfee() {
      this.realfee1 = '';
      this.realfee2 = '';
    },
    docongzheng() {
      this.newmoney();
      this.zjgltitle = '用途冲正';
      this.moneyData.feetype = '2';
      this.newzjgl = true;
    },
    dotuizu() {
      this.newmoney();
      this.zjgltitle = '用途退租';
      this.moneyData.feetype = '3';
      this.newzjgl = true;
    },
    limitmoney() {
      if (Number(this.realfee2) > Number(this.tzmoney)) {
        this.$message({
          type: 'success',
          message: '金额不能大于实缴租金',
        });
        this.realfee2 = this.tzmoney;
      }
    },
    getdisabledDate() {
      this.timestart = '';
      this.timeend = '';
      this.tzmoney = '';
      this.feeDate = [];
      for (let i = 0; i < this.parentfeeidList.length; i += 1) {
        if (this.moneyData.parentfeeid == this.parentfeeidList[i].hash.feeid) {
          this.timestart = this.parentfeeidList[i].hash.feestart;
          this.timeend = this.parentfeeidList[i].hash.feeend;
          this.tzmoney = this.parentfeeidList[i].hash.realfee;
          this.feeDate = [this.timestart, this.timeend];
        }
      }
    },
    deletemoney(item) {
      this.$confirm('确认删除该租金记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '76ABA4BE996F68CEB3F2193D08E3133233909615F9440E1A',
          token: localStorage.getItem('token'),
          feeid: item.hash.feeid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getbaseinfo();
        });
      });
    },
    disabledDate(time) {
      return time < new Date(`${this.timestart} 00:00:00`) || time > new Date(`${this.timeend} 00:00:00`);
    },
    clear1() {
      this.newidd = '';
      this.getshoukuanList(this.newidd);
    },
    clear2() {
      this.newidd2 = '';
      this.getshoukuanList2(this.newidd2);
    },
    handleSelect(item) {
      this.newidd = item.id;
      const res = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DDC3D14EFDFA2FC910A91ECB993FFF677670858E2911CF7F1F',
        token: localStorage.getItem('token'),
        rentid: this.newidd,
      };
      this.sget(this.ts, '/mainservlet', res).then((ts) => {
        this.parentfeeidList = ts.d.data.operation1;
      });
      this.getshoukuanList(item.id);
    },
    handleSelect2(item) {
      this.newidd2 = item.id;
      this.getshoukuanList2(item.id);
    },
    handleSelect3(item) {
      this.moneyData.rentid = item.id;
      const res = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DDC3D14EFDFA2FC910A91ECB993FFF677670858E2911CF7F1F',
        token: localStorage.getItem('token'),
        rentid: this.moneyData.rentid,
      };
      this.sget(this.ts, '/mainservlet', res).then((ts) => {
        this.parentfeeidList = ts.d.data.operation1;
      });
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString);
      const results = queryString ? this.restaurants.filter(this.createStateFilter(queryString)) : this.restaurants;

      clearTimeout(this.timeout1);
      this.timeout1 = setTimeout(() => {
        cb(results);
      }, 800 * Math.random());
    },
    createStateFilter(queryString) {
      return restaurant => (restaurant.value.indexOf(queryString) > -1);
    },
    querySearchAsync2(queryString, cb) {
      console.log(queryString);
      const results = queryString ? this.restaurants2.filter(this.createStateFilter2(queryString)) : this.restaurants2;

      clearTimeout(this.timeout2);
      this.timeout2 = setTimeout(() => {
        cb(results);
      }, 800 * Math.random());
    },
    createStateFilter2(queryString) {
      return restaurants2 => (restaurants2.value.indexOf(queryString) > -1);
    },
    querySearchAsync3(queryString, cb) {
      console.log(queryString);
      const results = queryString ? this.restaurants3.filter(this.createStateFilter3(queryString)) : this.restaurants3;

      clearTimeout(this.timeout3);
      this.timeout3 = setTimeout(() => {
        cb(results);
      }, 800 * Math.random());
    },
    createStateFilter3(queryString) {
      return restaurants3 => (restaurants3.value.indexOf(queryString) > -1);
    },
    getpayinfo() {
      this.payinfo = {};
      const res = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1D1E5D01809380793B35203C5C9B74D6F9BE89CF91227798',
        token: localStorage.getItem('token'),
        rentid: this.newidd,
        notstatus: '1',
      };
      this.sget(this.ts, '/mainservlet', res).then((ts) => {
        this.payinfo = ts.d.data.operation1[0].hash;
      });
    },
    submitshoukuan() {
      const a = Number(this.choosefwss) + Number(this.choosefwye);
      if (a < Number(this.choosefwys)) {
        this.$message('实收租金和余额之和必须大于应收租金');
        return;
      }
      this.$confirm('确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '76ABA4BE996F68CEDFC8492E914AB35B52108DFD23FB924D7FD0B8814F5048A0',
          token: localStorage.getItem('token'),
          rentid: this.newidd,
          feeidlist: this.choosefwid.toString(),
          actpay: `${this.choosefwss}`,
          paynotice: this.paynotice,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!',
          });
          this.choosefwss = 0;
          this.shoukuan = false;
          this.getshoukuanList(this.newidd);
        });
      });
    },
    doshoukuan() {
      if (this.payinfo.status == '0') {
        this.$message({
          type: 'error',
          message: '此租赁下有正在审核的收款信息，不可提交',
        });
        return;
      }
      if (this.choosesk.length < 1) {
        this.$message({
          type: 'error',
          message: '请先在表格中勾选租金',
        });
        return;
      }

      const req = {
        handle:
            '76ABA4BE996F68CEF9A9763329C1A0DDEB823EF41BF81EE4D8C4A1074CFD42ACBFF0B9210751F692',
        token: localStorage.getItem('token'),
        rentid: this.newidd,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.choosefwye = Number(ts.d.data.operation1[0].hash.balance);
        this.choosefwbh = this.choosesk[0].hash.detailnum + this.choosesk[0].hash.renter;
        this.choosefwys = 0;
        this.choosefwid = [];
        for (let i = 0; i < this.choosesk.length; i += 1) {
          this.choosefwys += Number(this.choosesk[i].hash.feeyear);
          this.choosefwid.push(this.choosesk[i].hash.feeid);
          // console.log(this.choosesk[i].hash.feeid);
        }
        this.choosefwys = Number((this.choosefwys).toFixed(2));
        // console.log(this.choosefwid.toString());
        this.choosefwss = (Number(this.choosefwys) - Number(this.choosefwye)).toFixed(2);
        if (this.choosefwss < 0) {
          this.choosefwss = 0;
        }
        this.shoukuan = true;
      });
    },
    getshoukuanList(id) {
      const req1 = {
        handle:
            '76ABA4BE996F68CEF9A9763329C1A0DDEB823EF41BF81EE4D8C4A1074CFD42ACBFF0B9210751F692',
        token: localStorage.getItem('token'),
        rentid: this.newidd,
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.choosefwye2 = Number(ts.d.data.operation1[0].hash.balance);
        this.choosefeeyear2 = Number(ts.d.data.operation1[0].hash.feeyear);
        this.chooserealfee2 = Number(ts.d.data.operation1[0].hash.realfee);
        this.chooserefundfee2 = Number(ts.d.data.operation1[0].hash.refundfee);
      });
      const req = {
        handle:
            '76ABA4BE996F68CE15C917E318C173B269F098E9778AE023CB7683D9B20500C7',
        hid: this.$route.query.hid,
        token: localStorage.getItem('token'),
        xh: this.$route.query.xh,
        rentid: id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailData3 = ts.d.data.operation4;
        this.getpayinfo();
      });
    },
    getshoukuanList2(id) {
      this.payinfo2 = {};
      const req = {
        handle:
            '76ABA4BE996F68CE15C917E318C173B2E8E4C8C781A37CD60043E289B1C32E44',
        hid: this.$route.query.hid,
        token: localStorage.getItem('token'),
        xh: this.$route.query.xh,
        rentid: id,
      };
      const res = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1D1E5D01809380793B35203C5C9B74D6F9BE89CF91227798',
        token: localStorage.getItem('token'),
        rentid: this.newidd2,
        status: '0',
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.payinfo2 = ts.d.data.operation1[0].hash;
      });
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.checkzjData = ts.d.data.operation2;
      });
    },
    inputzj(val) {
      // alert(val);
      if (val < 0) {
        this.yszjmoney = 0;
        return;
      }
      const a = Number(val) / (Number(this.payData2.hash.area1) + Number(this.payData2.hash.area2)) / Number(this.payData2.hash.szqx);
      this.yszjmoney2 = a.toFixed(2);
    },
    checkfwss(val) {
      if (val < 0) {
        this.choosefwss = 0;
      }
    },
    inputzj2(val) {
      if (val < 0) {
        this.yszjmoney2 = 0;
        return;
      }
      // alert(val);
      const a = Number(val) * (Number(this.payData2.hash.area1) + Number(this.payData2.hash.area2)) * Number(this.payData2.hash.szqx);
      this.yszjmoney = a.toFixed(2);
    },
    doedit(item) {
      console.log(item);
      this.yszjmoney = '';
      this.yszjmoney2 = '';
      this.payData2 = item;
      this.yszj = true;
    },
    submityszj() {
      if (this.yszjmoney == '' || Number(this.yszjmoney) <= 0) {
        this.$message({
          type: 'error',
          message: '请填写应收租金且租金必须大于0',
        });
      }
      if (this.yszjbz == '') {
        this.$message({
          type: 'error',
          message: '请填写备注信息',
        });
      }
      const req = {
        handle:
          '76ABA4BE996F68CEDFC8492E914AB35BCE47CB9D2E7C9ABB5FA808A62F12458B64EDEA66339D7026',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        feeid: this.payData2.hash.feeid,
        feeyear: this.yszjmoney,
        editnotice: this.yszjbz,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.$message({
          type: 'success',
          message: '保存成功',
        });
        this.yszj = false;
        this.getbaseinfo();
      });
    },
    submitsh() {
      if (this.shstatus == '') {
        this.$message({
          type: 'error',
          message: '请勾选审核状态',
        });
        return;
      }
      if (this.shstatus == '2' && this.shtip == '') {
        this.$message({
          type: 'error',
          message: '请填写审核备注',
        });
        return;
      }
      const req = {
        handle:
          '76ABA4BE996F68CE417AAAFED0C1AC071EF749189E43051A502146C2E4391390',
        token: localStorage.getItem('token'),
        rentid: this.newidd2,
        checknotice: this.shtip,
      };
      const req2 = {
        handle:
          '76ABA4BE996F68CE417AAAFED0C1AC07FB3CD0546CB4AB76614BED05C3A2CFC3',
        token: localStorage.getItem('token'),
        rentid: this.newidd2,
        checknotice: this.shtip,
      };
      if (this.shstatus == '1') {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '审核提交成功',
          });
          this.shenhe = false;
          this.newidd2 = '';
          this.checkzjData = [];
          this.getuseType2();
        });
      } else {
        this.spost(this.ts, '/mainservlet', req2).then((ts) => {
          this.$message({
            type: 'success',
            message: '审核提交成功',
          });
          this.shenhe = false;
          this.newidd2 = '';
          this.checkzjData = [];
          this.getuseType2();
        });
      }
    },
    tableRowClass(val) {
      if (val.row.hash.status == '10') {
        return 'row-bg';
      }
      return '';
    },
    rowStyle(val) {
      if (val.row.hash.status == '10') {
        return 'background:rgb(235, 235, 228)';
      }
      return '';
    },
    doshenhe() {
      this.shenhe = true;
    },
    handleSelectionChange(val) {
      this.choosezj = val;
    },
    handleSelectionChange2(val) {
      this.choosesk = val;
      console.log(this.choosesk);
    },
    checkboxInit2(row) {
      console.log(row);
      if (this.newid != '' && ((row.hash.realfee == '' && (row.hash.status == '1' || row.hash.status == '10')) || row.hash.status == '5') && row.hash.feetype == '1') {
        return 1;
      }
      return 0;
    },
    getuseType() {
      this.useType = [];
      this.restaurants = [];
      const res = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DD7C2F3FEA12C5FFC9EE9BEE200D3F4ED1',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        console.log(ts.d);
        this.useType = ts.d.data.operation1;
        for (let index = 0; index < this.useType.length; index += 1) {
          const a = {};
          // a.value = `${'房屋编号：'}${this.useType[index].hash.detailnum},承租人：${this.useType[index].hash.renter}`;
          a.value = `房屋编号：${this.useType[index].hash.detailnum}，承租人：${this.useType[index].hash.renter}，用途编号：${this.useType[index].hash.rentnum}`;
          a.id = this.useType[index].hash.rentid;
          this.restaurants.push(a);
        }
      });
    },
    getuseType2() {
      this.useType2 = [];
      this.restaurants2 = [];
      const res = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DD7C2F3FEA12C5FFC997B11CA354F07D0A',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.useType2 = ts.d.data.operation1;
        console.log('1');

        for (let i = 0; i < this.useType2.length; i += 1) {
          const a = {};
          a.value = `房屋编号：${this.useType2[i].hash.detailnum}，承租人：${this.useType2[i].hash.renter}，用途编号：${this.useType2[i].hash.rentnum}`;
          a.id = this.useType2[i].hash.rentid;
          this.restaurants2.push(a);
        }
        console.log('2');
        console.log(this.restaurants2);
      });
    },
    getuseType3() {
      this.useType3 = [];
      this.restaurants3 = [];
      const res = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DD7C2F3FEA12C5FFC9D1B633C1EB63CCAD',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        console.log(ts.d);
        this.useType3 = ts.d.data.operation1;
        for (let i = 0; i < this.useType3.length; i += 1) {
          const a = {};
          a.value = `房屋编号：${this.useType3[i].hash.detailnum}，承租人：${this.useType3[i].hash.renter}，用途编号：${this.useType3[i].hash.rentnum}`;
          a.id = this.useType3[i].hash.rentid;
          this.restaurants3.push(a);
        }
      });
    },
    dopay(item) {
      console.log(item);

      this.payData = item;
      this.shoukuan = true;
    },
    newmoney() {
      this.moneyData = {};
      // this.newid0 = '';
      this.realfee1 = '';
      this.realfee2 = '';
      this.feeDate = [];
      this.timestart = '';
      this.timeend = '';
      this.tzmoney = '';
    },
    submitrentmoney() {
      // if (!this.moneyData.rentid) {
      //   this.$message('请选择用途');
      //   return;
      // }
      // if (!this.moneyData.feetype) {
      //   this.$message('请选择类型');
      //   return;
      // }
      if (this.moneyData.feetype == '3' && !this.moneyData.parentfeeid) {
        this.$message('退租租金不能为空');
        return;
      }
      if (this.moneyData.feetype == '3' && !this.moneyData.servicefee) {
        this.$message('手续费不能为空');
        return;
      }
      // console.log(this.feeDate);

      if (this.moneyData.feetype == '3' && (this.feeDate == null || this.feeDate.length == 0)) {
        this.$message('请选择收租期限');
        return;
      }
      if (this.moneyData.feetype == '3' && !this.realfee2) {
        this.$message('金额不能为空');
        return;
      }
      if (this.moneyData.feetype == '2' && !this.realfee1) {
        this.$message('金额不能为空');
        return;
      }

      this.$confirm('确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let res;
        if (this.moneyData.feetype == '2') {
          res = {
            handle: '76ABA4BE996F68CE5F203644521BEE2AFBC9C68A32C72C5262C13E8FADB471E8BFF0B9210751F692',
            token: localStorage.getItem('token'),
            rentid: this.newidd,
            realfee: this.realfee1,
            feeyear: '',
            notice: this.moneyData.notice,
            feestart: '',
            feeend: '',
            feetype: this.moneyData.feetype,
            servicefee: '',
          };
        } else {
          res = {
            handle: '76ABA4BE996F68CE5F203644521BEE2A6FB3688AF72F8DF4',
            token: localStorage.getItem('token'),
            rentid: this.newidd,
            realfee: this.realfee2,
            parentfeeid: this.moneyData.parentfeeid,
            feeyear: this.moneyData.feeyear,
            notice: this.moneyData.notice,
            feestart: this.feeDate[0],
            feeend: this.feeDate[1],
            feetype: this.moneyData.feetype,
            servicefee: this.moneyData.servicefee,
          };
        }


        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '新增成功!',
          });
          // this.newid = '';
          // this.newidd = '';
          this.newmoney();
          this.getshoukuanList(this.newidd);
          this.newzjgl = false;
        });
      });
    },
    submitjiaofei() {
      if (!this.jfmoney || this.jfmoney.length < 1) {
        this.$message('缴费金额不能为空');
        return;
      }
      this.$confirm('确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '76ABA4BE996F68CEDFC8492E914AB35B45FBF88EDEE04D08',
          token: localStorage.getItem('token'),
          feeid: this.payData.hash.feeid,
          realfee: this.jfmoney,
          notice: '',
        };
        this.sget(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '提交成功!',
          });
          this.jfmoney = '';
          this.shoukuan = false;
          this.getbaseinfo();
        });
      });
    },
    getbaseinfo() {
      // alert(this.handletype);
      let req;
      if (this.handletype == '3') {
        req = {
          handle:
            '76ABA4BE996F68CED6E79E6CF72B4AD04920EC37433E0E2F91BE9BB85CED52D6',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else if (this.handletype == '4') {
        req = {
          handle:
            '76ABA4BE996F68CE15C917E318C173B269F098E9778AE023CB7683D9B20500C7',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else {
        req = {
          handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      }
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (this.handletype == '3') {
          this.detailData3 = ts.d.data.operation5;
        } else {
          this.detailData3 = ts.d.data.operation4;
        }
        // console.log(ts.d.data);
        // this.detailData3 = ts.d.data.operation4;
        // console.log(this.detailData3[0].realfee);
      });
    },
    getbaseinfo2() {
      const req = {
        handle:
            '76ABA4BE996F68CE15C917E318C173B2E8E4C8C781A37CD60043E289B1C32E44',
        hid: this.$route.query.hid,
        token: localStorage.getItem('token'),
        xh: this.$route.query.xh,
        rentid: this.newidd2,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.checkzjData = ts.d.data.operation2;
      });
    },
  },
  created() {
    console.log(this.$route);

    this.getuseType();
    this.getuseType2();
    this.getuseType3();
    if (this.$route.name == 'checkmdetail') {
      this.getbaseinfo2();
    }
    this.getbaseinfo();

    if (this.handletype == '3') {
      this.isupload = '0';
    }
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.el-table .row-bg {
  background:rgb(241, 90, 90) !important;
}
.errorMes{
  color:red
}
.suminfo{
  line-height:40px;
  margin-top:40px;
  font-size:16px;
  clear:both
}
.item {
  i {
    color: red;
  }
}

.xiugai {
  background: #ffff0070;
}

.avatar ul li {
  float: left;
  width: 33%;
}

.info-wrapper .info-content .upload-btn[data-v-6b40dfc5] {
  background: #fff;
  width: 90px;
}

.item-info>>>.el-date-editor .el-range-separator {
  padding: 0;
  line-height: 22px;
}

.item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 300px;
  height: 30px;
}

.item-info >>>.el-input__inner {
  height: 30px;
  border-top: 2px solid #999;
  border-radius: 0;
}

.item-info >>>.el-input__icon {
  line-height: 22px;
  color: #333;
}

.avatar >>>.el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 100px;
  margin-top: 20px;
}

.avatar >>>.el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
  margin-top: 20px;
}

.upload-btn >>>.el-upload-list__item {
  width: 160%;
}

.sub-btn >>> .el-button--success {
  background: #69f;
  border-color: #69f;
}

.sub-btn >>> .el-button {
  padding: 8px 20px;
}

.info-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  .info-w {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #69f;
    color: #fff;
    cursor: pointer;

    .info-c {
      width: 1200px;
      margin: 0 auto;

      .close {
        display: inline-block;
        margin-right: 20px;

        .iconfont {
          font-size: 20px;
        }
      }

      .title {
        display: inline-block;
        font-size: 18px;
      }
    }
  }

  .info-content {
    width: 1200px;
    min-height: 600px;
    margin: 0 auto 50px;

    .upload-btn {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      color: #fff;
    }

    .info-tab {
      cursor: pointer;
      border-bottom: 1px solid #ccc;

      .tab-item {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 15px 0 15px -1px;
        background: #fff;

        &.active {
          background: #69f;
          color: #fff;
        }
      }
    }

    .item-info {
      position: relative;

      .sub-btn {
        position: absolute;
        right: 190px;
        top: -60px;
        height: 40px;
        line-height: 40px;

        .save-btn, .add-btn {
          display: inline-block;
          margin-right: 15px;
        }
      }

      .info-list {
        margin-top: 50px;
        border-top: 1px solid #ccc;
        text-align: center;

        .title {
          padding: 30px 0;
          font-weight: 600;
          font-size: 18px;
          color: #6699ff;
        }

        table {
          text-align: center;
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          td, th {
            border: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            height: 40px;
          }

          thead {
            th {
              font-weight: 600;
              background-color: #F2F2F2;

              &:nth-of-type(2) {
                width: 120px;
              }
            }
          }
        }
      }

      .left-info, .right-info {
        display: inline-block;
        vertical-align: top;
        width: 600px;

        .item {
          margin-top: 5px;
          height: 30px;
          line-height: 30px;

          &:nth-of-type(1) {
            margin-top: 15px;
          }

          &.icon {
            position: relative;

            .iconfont {
              position: absolute;
              top: 0;
              right: 190px;
            }
          }

          span {
            display: inline-block;
            vertical-align: top;
            width: 90px;
            color: #333333;
            font-weight: 600;
          }

          input {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
          }

          select {
            display: inline-block;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
            text-align: right;

            &.min1 {
              width: 100px;
            }

            &.min2 {
              width: 200px;
              margin-left: -1px;
            }
          }

          &.textarea {
            height: 150px;

            textarea {
              width: 300px;
              height: 150px;
              border: 1px solid #ccc;
              border-top: 2px solid #999;
            }
          }

          &.spec {
            height: 70px;

            span {
              float: left;
            }

            .text {
              display: inline-block;

              input:nth-of-type(1) {
                width: 100px;
              }

              input:nth-of-type(2) {
                width: 200px;
              }

              &:nth-of-type(2) {
                margin-top: 5px;
              }
            }
          }

          &.spec2 {
            height: 30px;

            .text {
              display: inline-block;

              input {
                display: inline-block;
                vertical-align: top;
              }

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }

              select {
                display: inline-block;
                vertical-align: top;
                width: 100px;
              }
            }
          }

          &.spec3 {
            height: 70px;

            span {
              height: 70px;
              float: left;
            }

            .text {
              display: inline-block;
              margin-top: 5px;

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }
            }
          }

          &.spec4 {
            height: 70px;

            span {
              float: left;
              height: 70px;
            }

            input {
              margin-top: 5px;
            }
          }

          &.spec5 {
            .line {
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 1px;
              background: #ccc;
            }

            .iconfont {
              &:ntn-of-type(1) {
                right: 190px;
              }

              &:nth-of-type(2) {
                right: 350px;
              }
            }
          }
        }

        .upload {
          width: 400px;
          margin-top: 15px;
          text-align: center;

          .avatar {
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
          }

          .desc {
            margin-bottom: 15px;
          }

          .btn {
            display: inline-block;
            margin-bottom: 15px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            background: #69f;
            color: #fff;
          }
        }
      }

      &.base-info {
        .right-info {
          .item {
            margin-top: 6px;
          }
        }
      }

      &.rent-info {
        .right-info {
          .item {
            margin-top: 10px;

            &:nth-of-type(1) {
              margin-top: 15px;
            }
          }
        }
      }

      span {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}
</style>
